<template>
    <el-descriptions :column="2" border>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    设备名称
                </div>
            </template>
            {{ form.deviceName }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">设备品牌</div>
            </template>
            {{ form.deviceBrand }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">设备型号</div>
            </template>
            {{ form.deviceModel }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">设备序列号</div>
            </template>
            {{ form.serialNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">设备编号</div>
            </template>
            {{ form.deviceNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">区域</div>
            </template>
            {{ form.areaName }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">社区</div>
            </template>
            {{ form.community }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">小区</div>
            </template>
            {{ form.residentialName }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
            <template #label>
                <div class="cell-item">地址</div>
            </template>
            {{ form.address }}
        </el-descriptions-item>
<!--        <el-descriptions-item :span="2">-->
<!--            <template #label>-->
<!--                <div class="cell-item">地址</div>-->
<!--            </template>-->
<!--            <iframe src="https://www.baidu.com" style="width: 100%;min-height: 300px;">-->

<!--            </iframe>-->
<!--        </el-descriptions-item>-->
    </el-descriptions>
  </template>
<script setup>
import {useRoute} from "vue-router";
import {getSurveillance} from "@/api/wvp/surveillance";

const id = ref("")
const route = useRoute();
id.value = route.query.id
const form = ref({
    id: null,
    deviceName: null,
    serialNumber: null,
    deviceNumber: null,
    proviceName: null,
    proviceCode: null,
    cityName: null,
    cityCode: null,
    areaName: null,
    areaCode: null,
    address: null,
    community: null,
    residentialName: null,
    ip: null,
    macAddress: null,
    deviceBrand: null,
    deviceModel: null,
    deviceStatus: null,
    lastPushTime: null,
    createTime: null,
    createBy: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
    remark: null
})
getSurveillance(id.value).then(response => {
    form.value = response.data;
});
</script>
<style scoped>
>>> .el-descriptions__label {
    width: 100px !important;
}
.cell-item{
    text-align: center;
}

</style>
